<script setup lang="ts">
import { ref } from 'vue';
import { App } from 'ant-design-vue';
import {
  ITEM_RARITY_ORDER,
  ITEM_TYPE,
  ITEM_TYPE_ORDER,
} from '../../../../game/data/item/type';
import { ItemReader } from '../../../../game/systems/item/reader';
import { rarityTextColorClass } from '../../../../utils';
import { useInventory } from '../../../../composables';
import { EVENTS, GameKernel } from '../../../../game';

const { modal } = App.useApp();

const { state: inventoryState, backpackState } = useInventory();

const open = ref(false);
const rarityOptions = ITEM_RARITY_ORDER.map((item) => {
  return {
    label: ItemReader.getItemRarityName(item),
    value: item,
  };
});
const itemTypeOptions = ITEM_TYPE_ORDER.map((item) => {
  return {
    label: ItemReader.getItemTypeName(item),
    value: item,
  };
});

function show() {
  open.value = true;
}

function close() {
  open.value = false;
}

function onSaleClick() {
  modal.confirm({
    title: '提示',
    content: '确定要执行此批量操作吗？无法恢复。',
    okText: '确认',
    cancelText: '取消',
    centered: true,
    onOk() {
      /** 筛选符合要求的背包物品 */
      const items = inventoryState.value.slots
        .filter((item) => item !== null)
        .filter((item) => {
          const isType = item.itemConfig.type
            ? backpackState.value.type.includes(item.itemConfig.type)
            : false;
          if (!isType) return false;
          switch (item?.type) {
            case ITEM_TYPE.CULTIVATION_SKILL:
              return item.itemConfig.rarity
                ? backpackState.value.rarity.includes(item.itemConfig.rarity)
                : false;
            case ITEM_TYPE.EQUIPMENT:
              return item.ins?.payload?.equip?.rarity
                ? backpackState.value.rarity.includes(
                    item.ins.payload.equip.rarity
                  )
                : false;
            default:
              return false;
          }
        })
        .filter((item) => {
          return item?.itemConfig?.canSell !== false;
        });
      items.forEach((item) => {
        GameKernel.inst.bus.emit(
          EVENTS.INVENTORY_SELL,
          item.ins,
          item.ins.quantity
        );
      });
      close();
    },
  });
}

defineExpose({
  show,
  close,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    wrap-class-name="one-click-operation-modal hidden-title"
    :centered="true"
    :closable="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <div class="pb-2">
      <a-checkbox-group v-model:value="backpackState.rarity" class="w-full">
        <div class="grid grid-cols-4 gap-1 w-full">
          <div v-for="rarity in rarityOptions" :key="rarity.value">
            <a-checkbox :value="rarity.value">
              <span :class="rarityTextColorClass(rarity.value)">
                {{ rarity.label }}
              </span>
            </a-checkbox>
          </div>
        </div>
      </a-checkbox-group>
    </div>
    <div class="border-0 border-t border-solid border-border py-2">
      <a-checkbox-group v-model:value="backpackState.type" class="w-full">
        <div class="grid grid-cols-4 gap-1 w-full">
          <div v-for="type in itemTypeOptions" :key="type.value">
            <a-checkbox :value="type.value">{{ type.label }}</a-checkbox>
          </div>
        </div>
      </a-checkbox-group>
    </div>
    <div
      class="border-0 border-t border-solid border-border pt-2 flex items-center justify-center flex-wrap"
    >
      <a-button
        size="small"
        :disabled="
          backpackState.rarity.length === 0 || backpackState.type.length === 0
        "
        @click="onSaleClick"
      >
        出售
      </a-button>
    </div>
  </a-modal>
</template>

<style>
.one-click-operation-modal .ant-modal .ant-modal-content {
  padding: 8px;
}
.one-click-operation-modal.hidden-title .ant-modal .ant-modal-header {
  display: none;
}
</style>
